<script>
export default {
  name: "shop_detail",
  props: {
    days: {
      type: String,
    },
    usage_time: {
      type: String,
    },
    activity_rules: {
      type: String,
    }
  },
  data() {
    return {
      isMore: false,
      content: "<view className=\"list_tile u-flex\">体验规则</view>\n" +
          "<view style=\"margin-top: 16rpx\">1.报名成功后在\n" +
          "  <text style=\"color: #F37F2C\">次日24点前完成核销</text>\n" +
          "  (具体以订单页面显示核销倒计时为准)，\n" +
          "  <text style=\"color: #F37F2C\">逾期将自动取消订单并影响下次报名。</text>\n" +
          "</view>\n" +
          "<view style=\"margin-top: 16rpx\">2.若无法按时到店，请主动取消订单，避免影响后续报名活动。</view>\n" +
          "<view style=\"margin-top: 16rpx\">3.\n" +
          "  <text style=\"color: #F37F2C\">到店体验前先联系商家确认是否营业可接待，</text>\n" +
          "  避免跑空。</view>"
    }
  },
  methods: {
    more() {
      this.isMore = !this.isMore
    }
  }
}


</script>

<template>
  <view>
    <view class="details_info3">
      <view class="title" style="display: flex;align-items: center">
        <view class="bef_line"></view>
        <view style="margin-left: 10rpx">使用须知</view>
      </view>
      <view class="list_info_wrap">
        <view class="list_tile u-flex">有效期</view>
        <view class="list_item u-flex">
          <text v-if="days == 0">当天24点前</text>
          <text v-else>{{ days }}天</text>
        </view>
      </view>
      <view class="list_info_wrap">
        <view class="list_tile u-flex">使用时间</view>
        <view class="list_item u-flex">
          <text>{{ usage_time }}</text>
        </view>
      </view>
      <view class="list_info_wrap">
        <view class="list_tile u-flex">使用规则</view>
        <view class="list_item u-flex">
          <text>
            {{ activity_rules }}
          </text>
        </view>
      </view>
    </view>

    <view class="details_info3">
      <view class="title" style="display: flex;align-items: center">
        <view class="bef_line"></view>
        <view style="margin-left: 10rpx">体验说明</view>
      </view>
      <view class="list_info_wrap">
        <view class="list_tile u-flex">参与流程</view>
        <view class="buzhou_box u-flex"
              style="justify-content: space-between;margin: 10rpx 0 0;padding: 0;font-size: 24rpx;">
          <view class="buzhou_item u-flex">
            <text
                style="color: #FFFFFF;background-color: #c8c8c8;height: 33rpx;width:33rpx;border-radius: 8rpx;margin-left: 6rpx;text-align: center;line-height: 36rpx">
              1
            </text>
            <text style="margin-left: 6rpx;color: #999999">抢购名额</text>
          </view>
          <!--          <image class="jiantou" :src="BestImgUrl + '/PackageDetails/Frame.png'"></image>-->
          <view class="buzhou_item u-flex">
            <text
                style="color: #FFFFFF;background-color: #c8c8c8;height: 33rpx;width:33rpx;border-radius: 8rpx;margin-left: 6rpx;text-align: center;line-height: 36rpx">
              2
            </text>
            <text style="margin-left: 6rpx;color: #999999">到店核销</text>
          </view>
          <!--          <image class="jiantou" :src="BestImgUrl + '/PackageDetails/Frame.png'"></image>-->
          <view class="buzhou_item u-flex">
            <text
                style="color: #FFFFFF;background-color: #c8c8c8;height: 33rpx;width:33rpx;border-radius: 8rpx;margin-left: 6rpx;text-align: center;line-height: 36rpx">
              3
            </text>
            <text style="margin-left: 6rpx;color: #999999">发布笔记</text>
          </view>
          <!--          <image class="jiantou" :src="BestImgUrl + '/PackageDetails/Frame.png'"></image>-->
          <view class="buzhou_item u-flex">
            <text
                style="color: #FFFFFF;background-color: #c8c8c8;height: 33rpx;width:33rpx;border-radius: 8rpx;margin-left: 6rpx;text-align: center;line-height: 36rpx">
              4
            </text>
            <text style="margin-left: 6rpx;color: #999999">奖励到账</text>
          </view>
        </view>
      </view>
      <!--      <u-read-more show-height="300">-->
      <!--        <rich-text :nodes="content"></rich-text>-->
      <!--      </u-read-more>-->
      <view class="list_info_wrap" v-if="isMore">
        <view class="list_tile u-flex">报名规则</view>
        <view style="margin-top: 16rpx">1.抢到名额后需要在
          <text style="color: #F37F2C">15分钟内支付</text>
          ，支付完成即报名成功。
        </view>
        <view style="margin-top: 16rpx">2.同一账号，最多同时参与2个探店活动，订单完成后可继续报名新活动。</view>
        <view style="margin-top: 16rpx">3.下单需要消耗1张探店券，
          <text style="color: #F37F2C">订单取消后不返还。</text>
        </view>
      </view>
      <view class="list_info_wrap" v-if="isMore">
        <view class="list_tile u-flex">体验规则</view>
        <view style="margin-top: 16rpx">1.报名成功后在
          <text style="color: #F37F2C">次日24点前完成核销</text>
          (具体以订单页面显示核销倒计时为准)，
          <text style="color: #F37F2C">逾期将自动取消订单并影响下次报名。</text>
        </view>
        <view style="margin-top: 16rpx">2.若无法按时到店，请主动取消订单，避免影响后续报名活动。</view>
        <view style="margin-top: 16rpx">3.
          <text style="color: #F37F2C">到店体验前先联系商家确认是否营业可接待，</text>
          避免跑空。
        </view>
      </view>

      <view class="list_info_wrap" v-if="isMore">
        <view class="list_tile u-flex">笔记规则</view>
        <view style="margin-top: 16rpx">1.笔记上传时间:探店笔记需在
          <text style="color: #F37F2C">到店体验后72小时内</text>
          完成发布并上传，否则将影响下次报名活动。
        </view>
        <view style="margin-top: 16rpx">2.笔记内容:
          <text style="color: #F37F2C">
            探店笔记仅支持真实到店体验反馈，内容必须根据活动要求满足笔记字数、图片数量、携带话题、标题及定位等，
          </text>
          详细规则以具体活动页面为准，若不满足活动要求将无法获得全额返金额。
        </view>
        <view style="margin-top: 16rpx">3.笔记审核:笔记内容不符合活动要求将被驳回，
          <text style="color: #F37F2C">单笔订单累计驳回3次将被自动取消，</text>
          奖励无法发放，不支持再次上传笔记 ;若笔记被驳回，需要在驳回后的
          <text style="color: #F37F2C">48小时内</text>
          按审核反馈修改笔记并重新上传，超时订单将自动取消。
        </view>
        <view style="margin-top: 16rpx">4.笔记多次不符合活动要求、恶意宣传商户或平台误导他人，
          <text style="color: #F37F2C">将视具体情况限制30天起无法参与探店活动。</text>
        </view>
        <view style="margin-top: 16rpx">5.参与本平台活动的笔记，可能会被平台引用、展示，如有侵权可联系在线客服进行删除。
        </view>
        <view style="margin-top: 16rpx">6.笔记需在7天内完成上传，否则订单将自动完成，无法获取返现金额。
        </view>
      </view>
      <view @click="more" class="u-flex"
            style="justify-content: center;font-size: 24rpx;margin-top: 20rpx;color: #999999">
        {{ isMore ? '点击收起' : '点击展开' }}
        <view></view>
        <image src="/static/images/bottom.png" style="height: 16rpx;width: 16rpx;margin-left: 10rpx"
               :class="[isMore?'more':'no_more']"></image>
      </view>
    </view>

    <view class="details_info3">
      <view class="title" style="display: flex;align-items: center">
        <view class="bef_line"></view>
        <view style="margin-left: 10rpx">禁止行为规则</view>
      </view>
      <view class="list_info_wrap">
        <view style="margin-top: 16rpx">1.严禁使用AI工具生成、复制他人内容、帮买帮体验、多平台返现等虚假行为;</view>
        <view style="margin-top: 16rpx">2.探店笔记审核通过后
          <text style="color: #F37F2C">60天不可修改或撤销，</text>
          一经发现将收回订单对应补贴。
        </view>
        <view style="margin-top: 16rpx">
          3.严禁通过在领食参与到店活动后在任何平台给商户打分写评价(特殊店铺活动除外)，如遇问题可与领食客服反馈。
        </view>
        <view style="margin-top: 16rpx">4.发布笔记的账号需与在领食绑定的账号为同一个，如不一致将无法参与活动获得补贴;
        </view>
        <view style="margin-top: 16rpx">
          5.仅支持通过正常发笔记涨粉的账号，互粉、买粉等虚假涨粉行为，一旦检测出将会被限制无法参与活动。
        </view>
        <view style="margin-top: 16rpx">6.探店不支持换套餐、换菜品等不合理要求，探店必须堂食，除商家要求外不可打包。</view>
        <view style="margin-top: 16rpx">7.探店活动本身享受一折价格，如商家缺少套餐内菜品只支持按照商家实际情况换菜品，不支持单菜品退款，如有忌口请在上菜前核对菜品是否备齐，上菜后不支持退款。</view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.bef_line {
  width: 10rpx;
  border-radius: 20rpx;
  height: 30rpx;
  background-color: #fd6a00;
}

.details_info3 {
  padding: 0rpx 28rpx;
  background-color: #ffffff;
  border-radius: 28rpx;
  margin: 0 0 20rpx 0;
  //margin: 20rpx 20rpx 0;

  .title {
    font-size: 30rpx;
    color: $zzy-text-color-333333;
    font-weight: bold;
    width: 200rpx;
    height: 54rpx;
    margin-bottom: 28rpx;
  }

  .list_info_wrap {
    align-items: center;
    padding: 0 22rpx 0 22rpx;
    margin-top: 20rpx;

    .list_tile {
      color: $zzy-text-color-333333;
      font-weight: bold;
      font-size: 28rpx;
      align-items: center;

      span {
        display: inline-block;
        width: 6rpx;
        height: 6rpx;
        border-radius: 200rpx;
        background-color: $zzy-text-color-999999;
        margin-right: 10rpx;
      }
    }

    .list_item {
      align-items: flex-start;
      margin-top: 12rpx;
      padding-left: 16rpx;

      text:nth-child(1) {
        font-size: 28rpx;
        color: $zzy-text-color-666666;
        flex: 1;
      }

      text:nth-child(2) {
        font-size: 28rpx;
        color: $zzy-text-color-666666;
        margin-left: auto;
      }

      text:nth-child(3) {
        font-size: 28rpx;
        color: $zzy-text-color-666666;
        font-weight: bold;
        margin-left: auto;
      }
    }
  }
}

.list_info_wrap {
  line-height: 48rpx;

  .list_item {
    color: #666666;
    margin: 0;
    padding-top: 0;
  }
}

.more{
  transform: rotate(-60deg);
  transition: all .3s;
}
.no_more{
  transform: rotate(0deg);
  transition: all .3s;
}
</style>